<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5"></zui-watermark>
	<view class="u-p-36">
		<up-scroll-list ref="scrollRef" indicatorActiveColor="#5572c7"   >
			<view class="goods-item u-flex" :id="'item-' + index" @click="Check(goods)"
				:class="{ 'active' : goods.id === GoodsChecked.id }" v-for="(goods,index) in GoodsList" :key="goods.id">
				<view :style="{
					background: `url(${goods.img}) center center / cover no-repeat`,
					height: '60px',
					width: '60px',
					backgroundSize: 'contain'
				}"></view>
				<view class="u-m-l-12">
					<view class="name">{{goods.name}}</view>
					<view class="u-m-t-12 u-flex u-flex-items-center" style="color: #ff1023;font-size: 11px;">
						<view style="font-size: 11px;">当前价 </view>
						<view style="margin-left: 4px;">¥</view>
						<view style="font-size: 18px;font-weight: 500;">{{ goods.newsPrice }}</view>
					</view>
				</view>
			</view>
		</up-scroll-list>
	</view>
	<ly-charts-line :option="chartOption" :height="320" width="100%"></ly-charts-line>
	<view class="goods-name">{{ GoodsChecked.name }} <text class="u-m-l-8"
			style="color: #5572c7; font-size: 12px;">趋势图</text></view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import GoodsApi from '@/Api/Goods.js'
	import dayjs from 'dayjs';

	const chartOption = ref({
		title: {
			text: ''
		},
		xAxis: {
			data: []
		},
		yAxis: {},
		series: [{
			type: 'line',
			smooth: true,
			areaStyle: {},
			label: {
				show: true, // 显示标签
				color: '#666',
				position: 'top' // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
			},
			data: []
		}]
	})

	const GoodsList = ref([])
	const GoodsChecked = ref({})
	const scrollRef = ref(null)

	onLoad( options =>  {
		GoodsApi.List({
			categoryId: options.categoryId || 0
		}).then(resp => {
			GoodsList.value = resp.data
			GoodsChecked.value = resp.data.find(item => item.id == options.id) || resp.data[0]
			const index = resp.data.findIndex(item => item.id == options.id)
			// scrollToIndexManual(index)
			PriceRecord()
		})
	})

	const Check = (e) => {
		GoodsChecked.value = e
		PriceRecord()
	}

	const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
	const PriceRecord = () => {
		GoodsApi.PriceRecord(GoodsChecked.value.id).then(resp => {
			const [Day, Price] = resp.data.reduce((acc, item) => {
				acc[0].push(week[dayjs(item.day).day()]);
				acc[1].push(item.price);
				return acc;
			}, [
				[],
				[]
			]);
			Day.unshift('今天')
			Price.unshift(GoodsChecked.value.newsPrice)
			chartOption.value.xAxis.data = Day.reverse();
			chartOption.value.series[0].data = Price.reverse();
		})
	}
	
	
	const scrollToIndexManual = (index) => {
	  return new Promise((resolve) => {
	    nextTick(() => {
	      const query = uni.createSelectorQuery()
	      query.select(`#item-${index}`).boundingClientRect()
	      query.select('.u-scroll-list__scroll-view').boundingClientRect()
	      query.select('.u-scroll-list__scroll-view').scrollOffset()
	      
		  
		  
	      query.exec((res) => {
			console.info(res)
	        if (res[0]) {
	          const itemRect = res[0]
	          // const scrollViewRect = res[1]
	          // const scrollOffset = res[2]
	          const itemLeft = itemRect.left
	          // const scrollViewLeft = scrollViewRect.left
	          // const currentScrollLeft = scrollOffset.scrollLeft
	          // const targetScrollLeft = currentScrollLeft + (itemLeft - scrollViewLeft) - 50
			  console.info(scrollRef.value)
	          // 调用scroll-view的滚动方法
	          // if (scrollRef.value?.scrollTo) {
	            scrollRef.value.scrollTo({
	              left: itemLeft,
	              animated: true
	            })
	          // }
	        }
	        resolve()
	      })
	    })
	  })
	}
	
</script>

<style lang="scss" scoped>
	.goods-item {
		min-width: 180px;
		border: 2px solid #eee;
		border-radius: 6px;
		margin-right: 12px;
		padding: 4px 6px;
		display: flex;
		align-items: center;

		&.active {
			border: 2px solid #5572c7;
			transform: 0.3s;

			.name {
				color: #5572c7;
				font-weight: 500;
			}
		}

		.name {
			font-size: 14px;
			color: #000000;
		}
	}

	.goods-name {
		font-size: 18px;
		color: #000000;
		text-align: center;
		margin-top: 24px;
	}
</style>